<template>
  <el-row>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item prop="schoolName">
        <el-input
            placeholder="请输入学校名"
            v-model="this.selectForm.schoolName"
            clearable
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="floor">
        <el-input
            placeholder="请输入楼名"
            v-model="this.selectForm.floor"
            clearable
        >
        </el-input>
      </el-form-item>
      <el-form-item
      >
        <el-button
            type="primary"
            @click="lookAddressesByCondition(this.selectForm)"
        >搜索
        </el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button
            type="warning"
            @click="this.deleteAddresss(this.deleteAddressIds)"
        >批量删除
        </el-button>
      </el-form-item>
    </el-form>
    <el-col :span="3">
      <el-button type="primary" @click="this.insertDialogVisible = true"
      >添加地址
      </el-button>
    </el-col>
  </el-row>
  <el-row>
    <el-col>
      <el-table
          height="500"
          :data="tableData"
          border
          @selection-change="getAddressIds"
      >
        <el-table-column type="selection" width="55"/>
        <el-table-column
            v-for="column in this.tableColumn"
            :key="column.index"
            :label="column.label"
            :prop="column.prop"
            align="center"
            :width="column.width"
        ><!-- 权限列特殊处理 -->
          <template #default="scope" v-if="column.prop === 'floor'">
            <el-tag type="success">{{ scope.row.floor }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template #default="scope">
            <el-button size="small" @click="this.updateAddressClick(scope.row)"
            >修改
            </el-button>
            <el-button
                size="small"
                type="danger"
                @click="deleteOneAddress(scope.row.id)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <el-row>
    <el-col></el-col>
  </el-row>
  <!-- 添加一个地址 -->
  <el-dialog
      v-model="insertDialogVisible"
      title="添加地址"
      width="30%"
      center
      draggable
  >
    <el-form
        :model="insertAddressForm"
        :rules="addressRule"
        ref="insertAddress"
        @keyup.enter="this.insertOneAddress(this.insertAddressForm)"
    >
      <el-form-item prop="schoolName" label="学校名">
        <el-input v-model="this.insertAddressForm.schoolName"></el-input>
      </el-form-item>
      <el-form-item prop="floor" label="大楼名">
        <el-input v-model="this.insertAddressForm.floor"></el-input>
      </el-form-item>
      <el-form-item prop="ridgepole" label="楼栋号">
        <el-input-number
            v-model="this.insertAddressForm.ridgepole"
            :min="1"
        ></el-input-number>
      </el-form-item>
      <el-form-item prop="layer" label="楼层号">
        <el-input-number v-model="this.insertAddressForm.layer" :min="1">
        </el-input-number>
      </el-form-item>
      <el-form-item prop="number" label="房间号">
        <el-input-number
            v-model="this.insertAddressForm.number"
            :min="1"
        ></el-input-number>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="insertDialogVisible = false">取消</el-button>
      <el-button
          type="primary"
          @click="this.insertOneAddress(this.insertAddressForm)"
      >添加
      </el-button>
    </template>
  </el-dialog>
  <!-- 修改地址 -->
  <el-dialog
      v-model="updateDialogVisible"
      title="修改地址"
      width="30%"
      center
      draggable
  >
    <el-form
        :model="updateAddressForm"
        :rules="addressRule"
        ref="updateAddress"
        @keyup.enter="this.updateOneAddress(this.updateAddressForm)"
    >
      <el-form-item prop="schoolName" label="学校名">
        <el-input v-model="this.updateAddressForm.schoolName"></el-input>
      </el-form-item>
      <el-form-item prop="floor" label="大楼名">
        <el-input v-model="this.updateAddressForm.floor"></el-input>
      </el-form-item>
      <el-form-item prop="ridgepole" label="楼栋号">
        <el-input-number
            v-model="this.updateAddressForm.ridgepole"
            :min="1"
        ></el-input-number>
      </el-form-item>
      <el-form-item prop="layer" label="楼层号">
        <el-input-number v-model="this.updateAddressForm.layer" :min="1">
        </el-input-number>
      </el-form-item>
      <el-form-item prop="number" label="房间号">
        <el-input-number
            v-model="this.updateAddressForm.number"
            :min="1"
        ></el-input-number>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="updateDialogVisible = false">取消</el-button>
      <el-button
          type="primary"
          @click="this.updateOneAddress(this.updateAddressForm)"
      >修改
      </el-button>
    </template>
  </el-dialog>
</template>

<script>
import {
  lookAllAddresses,
  insertOneAddress,
  updateOneAddress,
  deleteAddress,
  lookAddressesByCondition,
} from "../api/address";

export default {
  data() {
    return {
      //表格数据
      tableData: [],
      //查询所需数据
      selectForm: {
        schoolName: "",
        floor: "",
      },
      //查询需要的地址Id
      addressId: "",
      //添加时需要的表单元素
      insertAddressForm: {
        schoolName: "",
        floor: "",
        ridgepole: 1,
        layer: 1,
        number: 1,
      },
      //修改时需要的表单元素
      updateAddressForm: {
        schoolName: "",
        floor: "",
        ridgepole: "",
        layer: "",
        number: "",
      },
      //添加对话框是否显示
      insertDialogVisible: false,
      //修改对话框是否显示
      updateDialogVisible: false,
      //批量删除时的id集合
      deleteAddressIds: [],
      //表单校验
      addressRule: {
        //学校名
        schoolName: [
          {
            required: true,
            message: "学校名不得为空!",
            trigger: "blur",
          },
        ],
        //楼名
        floor: [
          {
            required: true,
            message: "楼栋名不得为空!",
            trigger: "blur",
          },
        ],
        ridgepole: [
          {
            required: true,
            message: "楼栋号不得为空!",
            trigger: "blur",
          },
        ],
        //楼号
        layer: [
          {
            required: true,
            message: "楼层号不得为空!",
            trigger: "blur",
          },
        ],
        //房间号
        number: [
          {
            required: true,
            message: "房间号不得为空!",
            trigger: "blur",
          },
        ],
        //楼号
        floor: [
          {
            required: true,
            message: "楼栋名不得为空!",
            trigger: "blur",
          },
        ],
      },
      //地址列表
      addressMap: [],
      //列宽
      defaultColumn: 250,
      //表格列名集合
      tableColumn: [
        {
          index: 1,
          label: "编号",
          prop: "id",
          width: 55,
        },
        {
          index: 2,
          label: "学校名",
          prop: "schoolName",
          width: 270,
        },
        {
          index: 3,
          label: "大楼名",
          prop: "floor",
          width: 120,
        },
        {
          index: 4,
          label: "楼栋号",
          prop: "ridgepole",
          width: 120,
        },
        {
          index: 5,
          label: "楼层",
          prop: "layer",
          width: 120,
        },
        {
          index: 6,
          label: "房间号",
          prop: "number",
          width: 120,
        },
      ],
    };
  },
  created() {
    this.lookAllAddresses();
  },
  methods: {
    //查看所有地址逻辑
    lookAllAddresses() {
      lookAllAddresses().then((req) => {
        this.tableData = req.data.data;
        console.log(this.tableData);
      });
    },
    //根据条件查询地址
    lookAddressesByCondition(address) {
      console.log(address);
      lookAddressesByCondition(address).then((req) => {
        this.tableData = req.data.data;
      });
    },
    //添加一名地址
    insertOneAddress(obj) {
      console.log(obj);
      this.$refs["insertAddress"].validate((valid) => {
        if (valid) {
          insertOneAddress(obj).then((req) => {
            if (req.data.success) {
              this.$message({
                type: "success",
                message: "添加地址成功!可继续进行添加!",
                showClose: true,
              });
              this.lookAllAddresses();
              // this.insertDialogVisible = false;
              // this.insertAddressForm = {};
            } else {
              this.$message({
                type: "error",
                message: "添加地址失败!",
                showClose: true,
              });
            }
          });
        }
      });
    },
    //修改一名地址
    updateOneAddress(obj) {
      console.log(obj);
      this.$refs["updateAddress"].validate((valid) => {
        if (valid) {
          updateOneAddress(obj).then((req) => {
            if (req.data.success) {
              this.$message({
                type: "success",
                message: "修改地址成功!",
                showClose: true,
              });
              this.updateDialogVisible = false;
              this.lookAllAddresses();
            } else {
              this.$message({
                type: "error",
                message: "修改地址失败!",
                showClose: true,
              });
            }
          });
        }
      });
    },
    //删除一条地址信息
    deleteOneAddress(ids) {
      var id = [ids];
      this.$confirm("你真的要删除这条地址的信息吗?(真的永久)", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteAddress(id).then((req) => {
          if (req.data.success) {
            this.$message({
              type: "success",
              message: "删除地址成功!",
              showClose: true,
            });
            this.lookAllAddresses();
          } else {
            this.$message({
              type: "error",
              message: "删除地址失败!请检查该地址是否存在学生!",
              showClose: true,
            });
          }
        });
      });
    },
    //批量删除
    deleteAddresss(ids) {
      console.log(ids);
      this.$confirm(`你真的要删除${ids.length}条地址的信息吗?(真的永久)`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteAddress(ids).then((req) => {
          if (req.data.success) {
            this.$message({
              type: "success",
              message: "删除地址成功!",
              showClose: true,
            });
            this.lookAllAddresses();
          } else {
            this.$message({
              type: "error",
              message: "删除地址失败!",
              showClose: true,
            });
          }
        });
      });
    },
    //修改地址前的附加操作
    updateAddressClick(obj) {
      console.log(obj);
      this.updateAddressForm = obj;
      this.updateDialogVisible = true;
    },
    //获取选中的Id值
    getAddressIds(val) {
      var ids = [];
      for (let i = 0; i < val.length; i++) {
        ids[i] = val[i].id;
      }
      this.deleteAddressIds = ids;
    },
  },
};
</script>

<style>
</style>